<template>
	<uni-popup ref="popupRef" type="bottom" background-color="#F9F6F6" borderRadius="24rpx 24rpx 0rpx 0rpx">
		<view class="picker-box">
			<view class="picker-head">
				<text @click="close">取消</text>
				<view class="picker-title">
					<text>时间区间选择</text>
				</view>
				<text style="color: #ff6084" @click="confirm(1)">确定</text>
			</view>
			<view class="picker-range">
				<view class="picker-range-item">
					<text>{{ start_time }}</text>
				</view>
				<text class="picker-range-text">至</text>
				<view class="picker-range-item">
					<text>{{ end_time }}</text>
				</view>
			</view>
			<view class="no_time" @tap="confirm(2)">无时间段要求</view>
			<!--			<view :class="[selectType == 2 ? 'active__no_time' : '', 'no_time']" @click="handleSelect(2)">无时间段要求</view>-->
			<picker-view :indicator-style="indicatorStyle" :value="timeValue" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in hour" :key="index">{{ item }}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-item">至</view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in hour" :key="index">{{ item }}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</uni-popup>
</template>

<script setup>
import { ref } from "vue";
import dayjs from "dayjs";

const emit = defineEmits(["confirm"]);
const indicatorStyle = ref(`height: 50px;`);
const popupRef = ref();
const selectType = ref(1);
const type = ref("start");
const hour = ref([]);
const color = ref("#FF6084");
const minute = ref([]);
const start_time = ref("06:00");
const start_time_val = ref([6 - 6, 0]);
const end_time = ref("22:00");
const end_time_val = ref([22 - 6, 0]);

let timeValue = ref([6 - 6, 0, 22 - 6]);
const currentDate = ref("");
const numberArr = async () => {
	for (let i = 6; i <= 22; i++) {
		//不足两位时前面填充0
		if (i < 10) {
			i = "0" + i;
		}
		hour.value.push(`${i}:00`);
	}
};
numberArr();
const open = async (data) => {
	// currentDate.value = data;
	let dataArr = data.split("~");
	if (dataArr[0] == "00:00" && dataArr[1] == "00:00") {
	} else {
		console.log(data, "open111");
		// console.log(data.replaceAll("-", "~").split("~"))
		let dataArr = data.split("~");
		let startTimeArr = dataArr[0].split(":");
		start_time.value = dataArr[0];
		let endTimeArr = dataArr[1].split(":");
		end_time.value = dataArr[1];

		timeValue.value = [Number(startTimeArr[0]) - 6, 0, Number(endTimeArr[0]) - 6];
	}
	await popupRef.value.open();
};

const close = () => {
	popupRef.value.close();
	reset();
};
const bindChange = (e) => {
	console.log(e);
	start_time.value = hour.value[e.detail.value[0]];
	end_time.value = hour.value[e.detail.value[2]];
	timeValue.value = [e.detail.value[0], 0, e.detail.value[2]];

	// if (type.value == "start") {
	// 	start_time_val.value = e.detail.value;
	// 	start_time.value = hour.value[e.detail.value[0]] + ":" + minute.value[e.detail.value[1]];
	// } else {
	// 	end_time_val.value = e.detail.value;
	// 	end_time.value = hour.value[e.detail.value[0]] + ":" + minute.value[e.detail.value[1]];
	// }
};

const reset = () => {
	start_time.value = "06:00";
	timeValue.value = [6 - 6, 0, 22 - 6];
	end_time.value = "22:00";
};
const confirm = (type) => {
	// type-时间段要求   1-有 2-无
	if (type == 1) {
		let currentDateHour = dayjs().hour();
		let conditionA = Number(timeValue.value[0]) < Number(timeValue.value[2]);
		console.log(Number(timeValue.value[0]), "Number(timeValue.value[0])");
		console.log(Number(timeValue.value[2]), "Number(timeValue.value[2])");
		/* 时 相同   开始分 要小于 结束分 */
		// let conditionB = Number(timeValue.value[0]) == Number(timeValue.value[2]) && Number(start_time_val.value[1]) < Number(end_time_val.value[1]);
		/* 当天  开始时间 要大于当前   时   */
		let conditionC = dayjs(dayjs().format("YYYY-MM-DD")).isSame(dayjs()) ? Number(timeValue.value[0]) > Number(currentDateHour) : true;
		if (!conditionC) {
			return uni.showToast({
				title: "请选择正确的时间段!",
				icon: "none"
			});
		}
		if (conditionA) {
			emit("confirm", {
				startTime: start_time.value,
				endTime: end_time.value,
				type
			});
			close();
		} else {
			uni.showToast({
				title: "请选择正确的时间段!",
				icon: "none"
			});
		}
	} else {
		emit("confirm", {
			type
		});
		close();
	}
};

defineExpose({
	open
});

/* name: 'yun-picker-time-range',
	props: {
		color: {
			type: String,
			default: '#3c9cff',
		},
	},
	emits: ['cancle', 'confirm'],
	data() {
		return {
			type: 'start',
			hour: hour,
			minute: minute,
			indicatorStyle: `height: 50px;`,
			start_time: '00:00',
			start_time_val: [0, 0],
			end_time: '23:59',
			end_time_val: [23, 59],
		}
	},
	methods: {
		bindChange(e) {
			if (this.type == 'start') {
				this.start_time_val = e.detail.value
				this.start_time = this.hour[e.detail.value[0]] + ':' + this.minute[e.detail.value[1]]
			} else {
				this.end_time_val = e.detail.value
				this.end_time = this.hour[e.detail.value[0]] + ':' + this.minute[e.detail.value[1]]
			}
		},
		selectItem(type) {
			this.type = type
		},
		getStyle(type) {
			if (this.type == type) {
				return {
					color: this.color,
					fontWeight: 'bold',
				}
			} else {
				return {}
			}
		},
		reset() {
			this.type = 'start'
			this.start_time = '00:00'
			this.start_time_val = [0, 0]
			this.end_time = '23:59'
			this.end_time_val = [23, 59]
		},
		cancle() {
			this.$emit('cancle')
			this.reset()
		},
		confirm() {
			this.$emit('confirm', {
				start_time: this.start_time,
				start_time_val: this.start_time_val,
				end_time: this.end_time,
				end_time_val: this.end_time_val,
			})
			this.reset()
		},
	}, */
</script>

<style lang="scss" scoped>
.picker-box {
	background-color: #fff;

	.picker-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #e6e6e6;
		font-size: 30rpx;

		.picker-title {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			flex: 1;
		}
	}

	.picker-view {
		width: 100%;
		height: 400rpx;
		margin-top: 20rpx;
	}

	.picker-item {
		line-height: 100rpx;
		text-align: center;
	}

	.picker-range {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #e6e6e6;

		.picker-range-item {
			flex: 1;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			color: #ff6084;
			font-weight: bold;
		}

		.picker-range-text {
			font-size: 28rpx;
		}
	}
}

.no_time {
	margin: 20rpx;
	text-align: center;
	font-size: 28rpx;
}

.active__no_time {
	color: #ff6084;
}
</style>
